<template>
    <el-row class="border-radius">
        <el-form :inline="true" :model="queryForm" class="query-form" v-permission="['menu.list']" @submit.enter.prevent>
            <el-form-item :label="$t('data.search.label.keyword')">
                <el-input v-model="queryForm.name" :placeholder="$t('data.search.placeholder.keyword')"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="queryData">{{$t('data.button.search')}}</el-button>
            </el-form-item>
        </el-form>
    </el-row>
    <div class="border-radius mt4">
        <el-row class="operate" v-permission="['menu.add','menu.del']">
            <el-button type="success" @click="showAddDialog" v-permission="['menu.add']">{{$t('data.button.add')}}</el-button>
            <el-button type="danger" @click="deleteConfirm" v-permission="['menu.del']" :disabled="selectData.length==0">{{$t('data.button.delete')}}</el-button>
            <el-alert :title="$t('data.tip.selected',{count:selectData.length})" type="warning" show-icon :closable='false' v-if="selectData.length>0"></el-alert>
        </el-row>
    
        <el-table :data="tableData" border row-key="menuId" :tree-props="{ children: 'children', hasChildren: 'hasChildrens' }" 
            @selection-change="handleSelectionChange" v-loading="loading" v-permission="['menu.list']">
            <el-table-column type="selection" width="55" v-permission="['menu.del']"/>
            <el-table-column :label="$t('menu.menuName')" width="220" >                
                <template #default="scope">
                    <el-icon v-if="scope.row.children.length==0 && scope.row.hasChildren"><arrow-down /></el-icon>
                    {{scope.row.menuName}}
                </template>
            </el-table-column>
            <el-table-column prop="menuCode" :label="$t('menu.menuCode')" />
            <el-table-column prop="menuUrl" :label="$t('menu.menuUrl')" />
            <el-table-column prop="menuOrder" :label="$t('menu.menuOrder')" width="55"/>
            <el-table-column prop="menuIcon" :label="$t('menu.menuIcon')" width="110">
                <template #default="scope">
                    <el-icon v-if="scope.row.menuIcon"><component :is="scope.row.menuIcon"></component></el-icon>
                    {{scope.row.menuIcon}}
                </template>
            </el-table-column>
            <el-table-column prop="component" :label="$t('menu.component')" />
            <el-table-column fixed="right" :label="$t('data.column.operate')" v-permission="['menu.edit','menu.auth']">
                <template #default="scope">
                    <el-button type="text" @click="showEditDialog(scope.row)" v-permission="['menu.edit']">{{$t('data.button.edit')}}</el-button>
                    <el-button type="text" @click="showMenuAuthDialog(scope.row)" v-permission="['menu.auth']">{{$t('menu.manageAuth')}}</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <add-menu :form="dialogForm" :add="isAddDialog" :menuOptions="menuOptions" :visible="showDialog" @submit="addOrUpdateMenu" @close="closeAddDialog"/>
    <menu-auth :menuId="editMenuId" :visible="showAuthDialog" @close="closeAuthDialog"/>
</template>
<script>
import menuApi from '@/api/menu'
import AddMenu from './AddMenu.vue'
import MenuAuthList from './MenuAuthList.vue'
// import { ArrowDown} from '@element-plus/icons-vue'
export default{
    components:{
        AddMenu,
        'menu-auth':MenuAuthList
    },
    data(){
        return {
            queryForm:{
            },
            tableData:[],
            selectData:[],
            showDialog:false,
            isAddDialog:false,
            dialogForm:{},
            loading:false,
            menuOptions:[],
            editMenuId:null,
            showAuthDialog:false,
        }
    },
    mounted(){
        this.getTableList()
        // this.getAllMenuList()
    },
    watch:{
    },
    methods:{
        queryData(){
            this.getTableList();
        },
        handleSelectionChange(data){
            console.log('handleSelectionChange',data)
            this.selectData=data;
        },
        getTableList(){
            console.log("queryTable",this.queryForm)
            this.loading=true
            menuApi.getMenuTree(this.queryForm).then(d=>{
                this.loading=false
                console.log(d)
                if(!!d && d.code=='200'){
                    this.tableData=d.data || []
                    this.menuOptions=d.data || []
                }
            }).catch(()=>this.loading=false)
        },
        assignAuth(row){
          this.$router.push(`/menu/${row.menuId}/auth`)
        },
        showAddDialog(){
            this.showDialog=true;
            this.isAddDialog=true;
            this.dialogForm={menuOrder:0}
        },
        closeAddDialog(){
            this.showDialog=false;
            this.dialogForm={}
        },
        addOrUpdateMenu(form){
            if(this.isAddDialog){
                menuApi.addMenu(form).then(d=>{
                    if(!!d && d.code=='200'){
                        this.$message({
                            showClose: true,
                            message: this.$t('data.result.addSuccess'),
                            type: 'success',
                        })
                        this.closeAddDialog();
                        this.getTableList();
                        // this.getAllMenuList()
                    }
                })
            }
            else{
                menuApi.updateMenu(form).then(d=>{
                    if(!!d && d.code=='200'){
                        this.$message({
                            showClose: true,
                            message: this.$t('data.result.updateSuccess'),
                            type: 'success',
                        })
                        this.closeAddDialog();
                        this.getTableList();
                        // this.getAllMenuList()
                    }
                })
            }
        },
        showEditDialog(row){
            this.dialogForm={}
            menuApi.getMenu(row.menuId).then(d=>{
                if(!!d && d.code=='200'){
                    this.dialogForm=d.data || {}
                    this.isAddDialog=false;
                    this.showDialog=true;                    
                }
                else{
                    this.$message({
                        showClose: true,
                        message: this.$t('data.list.error'),
                        type: 'error',
                    })
                }
            })
        },
        deleteConfirm(){
            this.$messageBox.confirm(this.$t('data.confirm.deleteTreeNode'),this.$t('data.confirm.title'),{
                type: 'warning',
            })
            .then(() => {
                menuApi.deleteMenus(this.selectData.map(a=>a.menuId)).then(d=>{
                    if(!!d && d.code=='200'){
                        this.$message({
                            showClose: true,
                            message: this.$t('data.result.deleteSuccess'),
                            type: 'success',
                        })
                        this.queryData();
                    }
                })
            })            
        },
        showMenuAuthDialog(row){
          this.editMenuId=row.menuId
          this.showAuthDialog=true
        },
        closeAuthDialog(){
            this.showAuthDialog=false
        }
    }
}
</script>
